<%--
  Created by IntelliJ IDEA.
  User: 81968
  Date: 2022/10/21
  Time: 14:01
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!--
* @Author: Gigi 1517618446@qq.com
* @Date: 2022-08-18 15:35:00
* @LastEditors: Gigi 1517618446@qq.com
* @LastEditTime: 2022-09-08 00:44:01
* @FilePath: \ws\12_CSS_购物车示例.html
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>闪电秒杀-购物车</title>
    <link rel="stylesheet" href="../css/myShopcar.css">
    <script src="../js/jquery-3.6.0.min.js"></script>
    <link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css">
    <script src="../bootstrap/js/bootstrap.js"></script>
</head>

<body>
<div id="shopcar">
    <!-- 1.logo -->
    <div class="logo">
        <a href="../index.html">
            <img src="../images/shandianmiaosha_logo.png" style=" width: 170px; height:60px; margin-left: 20px; margin-top: -20px;">
        </a>
    </div>

    <!-- 2.搜索框 -->
    <div class="searchText">
        <input type="text" style="width: 320px;height: 30px; border: 2px solid rgb(230, 0, 0); padding-left: 5px; outline: none;">
        <a href="../product_show/more_products.html"><input type="submit" value="搜索" class="searchBtn" style="width: 52px; height: 30px; position: absolute; right: 0; border: none; background-color: rgb(230, 0, 0); color: white; line-height: 30px; text-align: center; font-size: 16px; font-weight: bolder; cursor: pointer;"></a>
    </div>

    <!-- 3.标题 -->
    <p class="pro_total_num">
        <span class="quanbushangpin">全部商品</span>
        <span class="num">3</span>
    </p>

    <!-- 4.表头 -->
    <div class="cart-head">

        <div class="select-ALLBtn">
            <input type="checkbox" class="check"><span>全选</span>
        </div>

        <div class="product"><span>商品</span></div>
        <div class="danjia"><span>单价</span></div>
        <div class="count"><span>数量</span></div>
        <div class="xiaoji"><span>小计</span></div>
        <div class="caozuo"><span>操作</span></div>
    </div>

    <!-- 5.商品列表 -->
    <div class="pro-list">
        <ul id = "myul">

            <%--<li class="pro">
                <!-- (1).选择框 -->
                <input type="checkbox" class="selectBtn">

                <!-- (2).商品图片 -->
                <a href="../product_show/detail.html"><img src="../images/shopcar_pro1.jpg" style="position:absolute; left:40px; margin-top: 25px;"></a>

                <!-- (3).商品名字 -->
                <div class="name">
                    <a href="../product_show/detail.html"><p>Mexin美心木门室内门卧室
                        门房间门木质复合烤漆简约现代风格定制木门2000定金
                    </p></a>

                    <!-- 优惠券 -->
                    <a href="../personal/myCoupon.html"><input type="submit" value="优惠券 >" style="width: 65px; height: 20px; background-color: rgb(230, 0, 0); color: white; line-height: 20px; text-align: center;border: none; border-radius: 2px; font-size: 13px; margin-top: 7px; cursor: pointer;" class="youhuiquanBtn"></a>
                </div>

                <!-- (4).商品价格 -->
                <div class="price">
                    <span>￥</span>
                    <span>100.00</span>
                </div>

                <!-- (5).商品数量 -->
                <div class="count">
                    <!-- - -->
                    <input type="submit" value="-" style="width: 20px;height: 20px;float: left; border: 1px solid lightgray;">
                    <!-- text -->
                    <input type="text" value = "1" style="width: 40px;height:20px;float: left; border: 1px solid lightgray; outline: none; text-align: center;">
                    <!-- + -->
                    <input type="submit" value="+" style="width: 20px;height: 20px;float: left; border: 1px solid lightgray;">
                </div>

                <!-- (6).小计 -->
                <div class="pro-xiaoji">
                    <span>￥</span>
                    <span>100.00</span>
                </div>

                <!-- (7).操作 -->
                <div class="pro-caozuo">
                    <button class="del" data-toggle="modal" data-target="#myModal1">删除</button>
                </div>
            </li>

            <li class="pro">
                <!-- (1).选择框 -->
                <input type="checkbox" class="selectBtn">

                <!-- (2).商品图片 -->
                <a href="../product_show/detail.html"><img src="../images/shopcar_pro1.jpg" style="position:absolute; left:40px; margin-top: 25px;"></a>

                <!-- (3).商品名字 -->
                <div class="name">
                    <a href="../product_show/detail.html"><p>Mexin美心木门室内门卧室
                        门房间门木质复合烤漆简约现代风格定制木门2000定金
                    </p></a>
                    <!-- 优惠券 -->
                    <a href="../personal/myCoupon.html"><input type="submit" value="优惠券 >" style="width: 65px; height: 20px; background-color: rgb(230, 0, 0); color: white; line-height: 20px; text-align: center;border: none; border-radius: 2px; font-size: 13px; margin-top: 7px; cursor: pointer;" class="youhuiquanBtn"></a>
                    <!-- 优惠券下拉框 -->
                    <!-- <div class="youhuiquan_msg">
                             <span style="width: 80px; height: 20px; line-height: 20px; text-align: center; font-size: 11px; color: grey; font-weight: bolder; margin-left: 10px; position: absolute; top: 8px;">可领取优惠券</span>

                             <div class="fangfe">
                                 <span style="width: 74px; height: 31px; line-height: 31px; text-align: 0; font-size: 14px; font-weight: bolder; color: #999; margin-left: 23px;">￥5</span>
                                 <p style="width: 220px; height: 10px;  font-size: 13px; color: #999; margin-left: 90px; margin-top: -32px;">
                                东券 满¥6减¥5 <br>
                                优惠扣减后，实付金额达门槛可用</p>
                            </div>
                            <input type="submit" value="领取" style="width: 60px; height: 25px; background-color: #e4393c; color: white; font-size: 13px; border: none; cursor: pointer; border-radius: 3px; margin-left: 330px; position: absolute; top: 50px;" >
                         </div>  -->
                </div>

                <!-- (4).商品价格 -->
                <div class="price">
                    <span>￥</span>
                    <span>200.00</span>
                </div>

                <!-- (5).商品数量 -->
                <div class="count">
                    <!-- - -->
                    <input type="submit" value="-" style="width: 20px;height: 20px;float: left; border: 1px solid lightgray;">
                    <!-- text -->
                    <input type="text"  value = "1" style="width: 40px;height:20px;float: left; border: 1px solid lightgray; outline: none; text-align: center;">
                    <!-- + -->
                    <input type="submit" value="+" style="width: 20px;height: 20px;float: left; border: 1px solid lightgray;">
                </div>

                <!-- (6).小计 -->
                <div class="pro-xiaoji">
                    <span>￥</span>
                    <span>200.00</span>
                </div>

                <!-- (7).操作 -->
                <div class="pro-caozuo">
                    <button class="del" data-toggle="modal" data-target="#myModal1">删除</button>
                </div>
            </li>

            <li class="pro">
                <!-- (1).选择框 -->
                <input type="checkbox" class="selectBtn">

                <!-- (2).商品图片 -->
                <a href="../product_show/detail.html"><img src="../images/shopcar_pro1.jpg" style="position:absolute; left:40px; margin-top: 25px;"></a>

                <!-- (3).商品名字 -->
                <div class="name">
                    <a href="../product_show/detail.html"><p>Mexin美心木门室内门卧室
                        门房间门木质复合烤漆简约现代风格定制木门2000定金</p></a>
                </div>

                <!-- (4).商品价格 -->
                <div class="price">
                    <span>￥</span>
                    <span>300.00</span>
                </div>

                <!-- (5).商品数量 -->
                <div class="count">
                    <!-- - -->
                    <input type="submit" value="-" style="width: 20px;height: 20px;float: left; border: 1px solid lightgray;" class="jian">
                    <!-- text -->
                    <input type="text"value = "1"  style="width: 40px;height:20px;float: left; border: 1px solid lightgray; outline: none; text-align: center;" >
                    <!-- + -->
                    <input type="submit" value="+" style="width: 20px;height: 20px;float: left; border: 1px solid lightgray;" class="jia">
                </div>

                <!-- (6).小计 -->
                <div class="pro-xiaoji">
                    <span>￥</span>
                    <span>300.00</span>
                </div>

                <!-- (7).操作 -->
                <div class="pro-caozuo">
                    <button class="del" data-toggle="modal" data-target="#myModal1">删除</button>
                </div>
            </li>--%>
        </ul>
    </div>

    <!-- 6.结算 -->
    <div class="totalmoney">
        <!-- (1).清空购物车 -->
        <div class="cleanAll">
            <button class="delall" data-toggle="modal" data-target="#myModal2">清空购物车</button>
        </div>

        <!-- (2).已选几件商品 -->
        <div class="pro-count">
            <a class="a">已选择</a>
            <span class="selectCount">0</span>
            <a class="b">件商品</a>
        </div>

        <!-- (3).总价 -->
        <div class="summoney">
            <a class="zongjia">总价：</a>
            <span class="dallor">￥</span>
            <span class="totalPrice">0.00</span>
        </div>

        <!-- (4).去结算 -->
        <a  class="gopay" href=""><input type="submit" value="去结算" style="width: 130px;height: 70px;  background-color: rgb(230, 0, 0); color: white; font-weight: bolder; font-size: 20px; position: absolute; right: 0; border: none; cursor: pointer;"></a>

    </div>

    <!-- 模态框（Modal） -->
    <div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header h">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="myModalLabel1">提示</h4>
                </div>
                <div class="modal-body o">您确定要删除该订单吗？删除后将不可恢复！</div>
                <div class="modal-footer f">
                    <button type="button" class="btn btn-default b" data-dismiss="modal">取消</button>
                    <button type="button" class="yes" id="yes_btn1">确定</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>

    <!-- 模态框（Modal） -->
    <div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header h">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="myModalLabel2">提示</h4>
                </div>
                <div class="modal-body o">您确定要清空购物车吗？删除后将不可恢复！</div>
                <div class="modal-footer f">
                    <button type="button" class="btn btn-default b" data-dismiss="modal">取消</button>
                    <button type="button" class="yep" id="yes_btn2">确定</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>


</div>

<script src="../js/myShopcar.js"></script>
</body>
</html>
